<template>
    <div style="height: 100%;width: 100%;border: 1px solid red;">
        <!-- 
      这个 div 是地图的容器，地图最终会在这个 div 中渲染。
      ref="mapContainer" 是 Vue 的语法，让我们能在 JS 中轻松获取到这个 DOM 元素。
      style 给它设置了高度，没有高度，地图容器就是 0 像素，就看不到了。
    -->
        <div ref="mapContainer1" style="height: 100%;width: 100%;border: 1px solid red;"></div>
    </div>
</template>

<script>
// 1. 按需从 'ol' 库中导入我们需要的模块。
// 这是 OpenLayers 官方推荐的方式，只导入用到的部分，可以减小最终代码的体积。
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';

import XYZ from 'ol/source/XYZ';
export default {
    name: 'map2',
    // 2. 组件挂载到 DOM 后执行
    mounted() {
        // 在组件初始化时调用
        // useGeographic();
        // 初始化地图
        this.initMap();

    },
    methods: {
        initMap() {
            // 3. 在 Vue 的 mounted 钩子中，this.$refs.mapContainer 可以获取到上面的 div 元素
            const mapContainer1 = this.$refs.mapContainer1;

            // 4. 创建地图实例！这是最核心的对象。
            // 它需要一个 target（放置到哪里）和一些 layers（图层）。
            this.map = new Map({
                // target 是地图容器的 DOM 元素
                target: mapContainer1,
                // layers 定义地图的图层。这里我们先添加一个最基础的瓦片图层：OpenStreetMap
                layers: [
                    new TileLayer({
                        // source: new OSM() // 使用 OpenStreetMap 的瓦片
                        source: new XYZ({
                            url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
                            attributions: [
                                '© <a href="https://www.amap.com/" target="_blank">高德地图</a>'
                            ]
                        })

                    })
                ],
                // view 控制地图的显示中心、缩放级别等。
                view: new View({
                    center: [116.3974, 39.9093], // 北京天安门的经纬度
                    zoom: 16
                })
            });
        }
    },
    // 5. 重要的清理工作：当组件被销毁时，我们也需要销毁地图，释放内存。
    beforeUnmount() {
        if (this.map) {
            this.map.setTarget(null); // 将地图从 DOM 中移除
            this.map = null; // 释放地图实例的引用
        }
    },
}
</script>

<style scoped>
/* 这里可以写组件特有的样式 */
</style>